window.onload = function() {
    let mega = new Megaloscope();
}

function Megaloscope() {
    this.pic = document.querySelectorAll(".pic img");
    this.zoom = document.querySelector('.zoom');
    this.sImg = document.querySelector(".small_area img");
    this.bImg = document.querySelector(".big_area img");
    this.small = document.querySelector(".small_area");
    this.big = document.querySelector('.big_area');
    this.mask = document.querySelector('.mask');
    this.cal();
}
Megaloscope.prototype.cal = function() {
    this.small_onmouseenter();
    this.small_onmouseleave();
    this.small_onmousemove();
    this.pic_Selected();
}
Megaloscope.prototype.small_onmouseenter = function() {
    let that = this;
    this.small.onmouseenter = function() {
        that.mask.style.left = 0;
        that.big.style.left = 210 + "px";
        that.big.style.top = -100 + "px";
    }
}
Megaloscope.prototype.small_onmouseleave = function() {
    let that = this;
    this.small.onmouseleave = function() {
        that.mask.style.left = -10000 + "px";
        that.big.style.left = -10000 + "px";
    }
}
Megaloscope.prototype.small_onmousemove = function() {
    let that = this;
    this.mask.style.width = this.big.clientWidth * (this.sImg.offsetWidth / this.bImg.offsetWidth) + "px";
    this.mask.style.height = this.big.clientHeight * (this.sImg.offsetHeight / this.bImg.offsetHeight) + "px";
    let maxWidth = this.sImg.clientWidth - this.mask.offsetWidth;
    let maxHeight = this.sImg.clientHeight - this.mask.offsetHeight;
    this.small.onmousemove = function(e) {
        e = e || window.event;
        let nLeft = e.pageX - that.zoom.offsetLeft - that.zoom.clientLeft - that.mask.offsetWidth / 2;
        let nTop = e.pageY - that.zoom.offsetTop - that.zoom.clientTop - that.mask.offsetHeight / 2;
        that.nLeft = Math.min(maxWidth, Math.max(0, nLeft));
        that.nTop = Math.min(maxHeight, Math.max(0, nTop));
        that.mask.style.left = that.nLeft + "px";
        that.mask.style.top = that.nTop + "px";
        that.bImg.style.left = -(that.bImg.offsetWidth - that.big.offsetWidth) * nLeft / (that.sImg.offsetWidth - that.mask.offsetWidth) + "px";
        that.bImg.style.top = -(that.bImg.offsetHeight - that.big.offsetHeight) * nTop / (that.sImg.offsetHeight - that.mask.offsetHeight) + "px";
    }
}

Megaloscope.prototype.pic_Selected = function() {
    let that = this;
    this.pic.forEach(function(item) {
        item.onclick = function() {
            let s = that.sImg.src;
            that.sImg.src = item.src; that.bImg.src = item.src;
            item.src = s;
        }
    })
}